<template>
  <div id="users" class="app-container">
    <div class="filter-container" style="display: flex; margin-bottom: 20px;">
      <!-- 使用搜索组件 -->
      <search-item ref="search" :query="queryInfo" @filter="handleFilter" />
      <!-- 添加用户 -->
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="openAddDialog">
        添加用户
      </el-button>
      <!-- 使用添加用户弹框组件 -->
      <add-item ref="add" :dialog="addFormVisible" @close="closeAddDialog" @add="handleAddUser" />
    </div>

    <!-- 表格主体 -->
    <div id="content">
      <el-table :data="userlist" border fit highlight-current-row stripe>
        <el-table-column label="序号" type="index" width="100px" align="center" />
        <el-table-column label="用户名" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" min-width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.role_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="200px" align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.mg_state" @change="userStateChange(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="350px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="openEditDialog(row)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(row)">删除</el-button>
            <!-- 分配角色按钮 -->
            <el-button type="warning" icon="el-icon-setting" size="mini" @click="openRoleDialog(row)">角色</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 使用编辑用户弹框组件 -->
    <edit-item ref="edit" :dialog="editFormVisible" :value="editForm" @close="closeEditDialog" @edit="handleEditUser" />

    <!-- 使用分页组件 -->
    <pagination-item v-show="total>0" :total="total" :page.sync="queryInfo.pagenum" :limit.sync="queryInfo.pagesize" @pagination="handlePagination" />

    <!-- 使用用户权限弹框组件 -->
    <role-item ref="role" :dialog="setRoleDialogVisible" @close="closeRoleDialog" @role="handleUserRole" />
  </div>
</template>

<script>
// 请求后台的方法
import { usersList, stateChange, addUser, removeUser, getUserById, editUserById, getUserRole, assignUserRole } from '@/api/users'
// 1.导入组件
import SearchItem from './components/search'
import AddItem from './components/add'
import EditItem from './components/edit'
import PaginationItem from './components/pagination'
import RoleItem from './components/role'

export default {
  name: 'Users',
  // 2.注册组件
  components: {
    'search-item': SearchItem,
    'add-item': AddItem,
    'edit-item': EditItem,
    'pagination-item': PaginationItem,
    'role-item': RoleItem
  },
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10
      },
      userlist: [],
      total: 0,
      // 添加用户对话框弹窗，开始是关闭的
      addFormVisible: false,
      // 编辑用户对话框弹窗，开始是关闭的
      editFormVisible: false,
      // 编辑权限对话框弹窗，开始是关闭的
      setRoleDialogVisible: false,
      // 编辑对话框的表单内容
      editForm: {}
    }
  },
  created() {
    this.getUsersList()
  },
  methods: {
    // 用户数据列表
    getUsersList() {
      const data = {
        pagenum: this.queryInfo.pagenum,
        pagesize: this.queryInfo.pagesize
      }
      // 将拿到的数据发送给后台
      usersList(data).then((response) => {
        this.apiResult(response)
      })
    },
    // 处理搜索后分页，查询就是拿到 query数据，重新分页
    handleFilter(query) {
      const data = {
        query: query.query, // 查询参数，可以为空
        pagenum: this.queryInfo.pagenum,
        pagesize: this.queryInfo.pagesize
      }
      usersList(data).then((response) => {
        this.apiResult(response)
      })
    },
    // 点击分页器后的分页
    handlePagination() {
      const data = {
        query: this.$refs['search'].queryInfo.query,
        pagenum: this.queryInfo.pagenum,
        pagesize: this.queryInfo.pagesize
      }
      usersList(data).then((response) => {
        this.apiResult(response)
      })
    },
    // 拿到后台响应的数据，渲染到页面
    apiResult(response) {
      if (response.data.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      this.userlist = response.data.data.users
      this.total = response.data.data.total
    },

    // 监听 switch 开关状态的改变，修改用户状态
    userStateChange(data) {
      stateChange(data).then((response) => {
        if (response.data.meta.status !== 200) {
          data.mg_state = !data.mg_state
          return this.$message.error('更新用户状态失败！')
        }
        this.$message.success('更新用户状态成功！')
      })
    },
    // 展示分配角色的对话框
    openRoleDialog(data) {
      this.$refs['role'].userInfo = data
      // 1.在展示对话框之前，获取所有角色的列表
      getUserRole(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('获取角色列表失败')
        }
        this.$refs['role'].rolesList = response.data.data
        this.setRoleDialogVisible = true
      })
    },
    // 2.接收组件的请求关闭方法，关闭弹框
    closeRoleDialog() {
      // 关闭弹框前的回调
      var msg = '是否放弃为该用户重新分配角色？'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        // 关闭对话框和清除表单
        this.setRoleDialogVisible = false
        this.$refs['role'].$refs['roleFormRef'].resetFields()
      }).catch(() => { this.$message('已取消分配角色') })
    },
    // 3.接收组件的请求增加方法，向后台发送请求
    handleUserRole(data) {
      this.addFormVisible = false
      assignUserRole(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('分配角色失败！')
        }
        this.setRoleDialogVisible = false
        this.$refs['role'].$refs['roleFormRef'].resetFields()
        this.getUsersList()
        this.$notify({ title: '提示', message: '分配角色成功！', type: 'success' })
      })
    },

    // 二、添加用户开始
    // 1.点击按钮，打开弹框
    openAddDialog() {
      // 弹框组件内部使用 :dialog="dialogFormVisible"，传递该状态值
      this.addFormVisible = true
    },
    // 2.接收组件的请求关闭方法，关闭弹框
    closeAddDialog() {
      // 关闭弹框前的回调
      var msg = '是否放弃添加用户？'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        // 关闭对话框和清除表单
        this.addFormVisible = false
        // 做一个标识 ref="add"，让它可以找到 ref属性值为 add的组件
        this.$refs['add'].$refs['addFormRef'].resetFields()
      }).catch(() => {
        this.$message('已取消添加！')
      })
    },
    // 3.接收组件的请求增加方法，向后台发送请求
    handleAddUser(data) {
      this.addFormVisible = false
      addUser(data).then((response) => {
        // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
        this.userlist.unshift(response.data.data, 1)
        // 重置表单
        this.$refs['add'].$refs['addFormRef'].resetFields()
        // 刷新列表
        this.getUsersList()
        this.$notify({ title: '提示', message: '添加成功！', type: 'success' })
      })
    },
    // 添加用户结束

    // 三、删除
    removeUserById(data) {
      // 弹框提示是否要删除
      var msg = '此操作将永久删除该用户, 是否继续?'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        removeUser(data).then((response) => {
          this.userlist.splice(data.id, 1)
          if (response.data.meta.status !== 200) {
            return this.$message.error('删除用户失败！')
          }
          this.getUsersList()
          this.$notify({ title: '提示', message: '删除用户成功！', type: 'success' })
        })
      }).catch(() => {
        this.$message.info('已取消删除用户！')
      })
    },

    // 四、编辑用户开始
    // 展示编辑用户的对话框
    openEditDialog(data) {
      // 1.先进行请求，渲染数据到编辑对话框
      getUserById(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('查询用户信息失败')
        }
        this.$refs['edit'].editForm = response.data.data
        this.editFormVisible = true
      })
    },
    // 2.接收组件的请求关闭方法，关闭弹框
    closeEditDialog() {
      // 关闭弹框前的回调
      var msg = '是否放弃编辑用户？'
      this.$confirm(msg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        // 关闭对话框
        this.editFormVisible = false
      }).catch(() => {
        this.$message('已取消编辑用户！')
      })
    },
    // 3.接收组件的请求编辑方法，向后台发送请求
    handleEditUser(data) {
      this.editFormVisible = false
      editUserById(data).then((response) => {
        if (response.data.meta.status !== 200) {
          return this.$message.error('编辑用户信息失败！')
        }
        this.$refs['edit'].$refs['editFormRef'].resetFields()
        this.getUsersList()
        this.$notify({ title: '提示', message: '更新用户信息成功！', type: 'success' })
      })
    }
    // 编辑用户结束

  }
}
</script>
